<template>
  <div class="l-echart-scrollrank" :style="styleSizeName" @click="handleClick">
    <div :class="`animated ${animateValue}`" style="width: 100%; height: 100%">
      <component
        :is="option.is"
        v-if="reload"
        :style="styleImgName"
        :config="dataHandle.config"
      ></component>
    </div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
  mixins: [init],
  data() {
    return {
      isFresh: false,
      reload: true,
      dataHandle: {},
    };
  },
  created() {
    if (!this.option.opacity) this.$set(this.option, "opacity", 100);
  },
  computed: {
    styleImgName() {
      return Object.assign({
        width: "100%",
        height: "100%",
        transitionProperty: "all",
        opacity: this.option.opacity / 100,
        transform: `rotateX(${this.option.rotateX}deg) rotateY(${this.option.rotateY}deg) rotateZ(${this.option.rotateZ}deg) scale(${this.option.scale})`,
      });
    },
    animateValue: {
      get() {
        return this.option.animateValue;
      },
      set() {},
    },
    
  },
  watch: {
    fresh: {
      handler() {
        this.flylineFormatter();
      },
    },
    option: {
        handler() {
        this.flylineFormatter();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    flylineFormatter() {
        const optionData = this.$deepClone(this.dataChart);
        let data;
        if (!optionData.points) return
        data = optionData;
     this.dataHandle = {
        config: {
          points: data.points,
          lines: data.lines,
          icon: {
        show: this.option.icon.show,
        src: this.option.icon.src ? `${
              this.apiUrl
            }system/annexesfile/${this.option.icon.src.replace(
              "$BASE_URL",
              ""
            )}?token=${this.token}` : '',
        width: this.option.icon.width,
        height: this.option.icon.height,
        },
          text: {
            show: this.option.text.show,
            offset: [this.option.text.offset.x - 0, this.option.text.offset.y- 0],
            color: this.option.text.color,
            fontSize: this.option.text.fontSize
          },
          halo: {
            show: this.option.halo.show,
            duration: [this.option.halo.duration.x - 0, this.option.halo.duration.y - 0],
            color: this.option.halo.color,
            radius: this.option.halo.radius,
          },
          line: {
            width: this.option.line.width,
            color: this.option.line.color,
            orbitColor: this.option.line.orbitColor,
            duration: [this.option.line.duration.x - 0, this.option.line.duration.y - 0]
          },
          k: this.option.line.k,
          curvature: this.option.line.curvature,
          bgImgSrc: this.option.bgImgSrc? `${this.apiUrl}system/annexesfile/${this.option.bgImgSrc}?token=${this.token}` : ''
        },}
        this.reload = false;
      this.$nextTick(() => {
        this.reload = true;
      })
    },
    handleClick() {
      this.clickFormatter &&
        this.clickFormatter(
          {
            data: this.dataHandle,
          },
          this.getItemRefs()
        );
    }
  },
};
</script>